<template>
	<view class="text-center">
		<u-navbar height="50" :is-back="false" title="版本更新" title-size="36" title-color="#2A2A2A"></u-navbar>
		<u-gap height="60" bg-color="#ffffff"></u-gap>
		<view class="px-2">
			<cmd-circle cid="circle10" type="circle" :percent="progress" :status="status"></cmd-circle>
			<view class="text-center pb-2 pt-1">{{ tips }}</view>
			<u-button v-if="this.status == 'exception'" class="btn-grad" type="primary" shape="circle" @click="confirmUpdate">重新安装</u-button>
		</view>
	</view>
</template>

<script>
	import cmdCircle from "@/components/cmd-circle/cmd-circle.vue"
	export default {
		components: {
			cmdCircle
		},
		data() {
			return {
				downloadURL: '',
				progress: 0,
				tips: '下载更新包',
				status: 'normal'
			}
		},
		onLoad(options) {
			this.downloadURL = options.url
		},
		onShow() {
			this.confirmUpdate();
		},
		methods: {
			// 确认更新版本
			confirmUpdate() {
				this.tips = '下载更新包';
				this.status = 'normal';
				
				const downloadTask = uni.downloadFile({
					url: this.downloadURL,
					success: data => {
						console.log(data);
						if (data.statusCode === 200) {
							// force=true表示强制安装，不进行版本号的校验；
							// force=false则需要版本号校验，如果将要安装应用的版本号不高于现有应用的版本号则终止安装，并返回安装失败。仅安装wgt和wgtu时生效，默认值 false。
							plus.runtime.install(data.tempFilePath, {
								force: true  
							}, (res) => {
								plus.runtime.restart();  
							}, (err) => {
								// console.log('失败' + JSON.stringify(err));
								// uni.showToast({ title: '安装失败', icon: 'none' })
								this.status = 'exception'
								this.progress = 99
								this.tips = '安装失败，请稍后再试'
							});
						}
						uni.hideLoading();
					},
					fail: () => {
						uni.hideLoading();
					}
				})
				
				downloadTask.onProgressUpdate((res) => {
					this.progress = res.progress;
					if (res.progress == 100) this.tips = '下载完成，开始安装';
				    // console.log('下载进度' + res.progress);
				    // console.log('已经下载的数据长度' + res.totalBytesWritten);
				    // console.log('预期需要下载的数据总长度' + res.totalBytesExpectedToWrite);
				});
			}
		}
	}
</script>

<style>
</style>
